import * as THREE from 'three'
import { stats } from '../stats'
import { gui } from '../gui'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

function createCourse25 (dom: HTMLElement) {
  const scene = new THREE.Scene()

  const camera = new THREE.PerspectiveCamera(75, dom.offsetWidth / dom.offsetHeight, 0.01, 1000)
  camera.position.set(50, 50, 50)

  const render = new THREE.WebGLRenderer()
  render.setSize(dom.offsetWidth, dom.offsetHeight)
  render.shadowMap.enabled = true

  dom.appendChild(render.domElement)

  const axes = new THREE.AxesHelper(100)
  scene.add(axes)

  const controls = new OrbitControls(camera, render.domElement)
  controls.update()

  const sphereGeometry = new THREE.SphereGeometry(20, 20, 20)
  const meshMaterial = new THREE.MeshLambertMaterial({ color: 0x81d8cf })
  const sphere = new THREE.Mesh(sphereGeometry, meshMaterial)

  scene.add(sphere)

  const spotLight = new THREE.SpotLight(0xffffff)
  spotLight.position.set(60, 60, 60)
  // scene.add(spotLight);

  const ambientLight = new THREE.AmbientLight(0xffffff)
  scene.add(ambientLight)

  const ctrlObj = {
    color: 0x81d8cf,
    emissive: 0x000000,
    emissiveIntensity: 1,
    VertexColors: false
  }

  const ctrl = gui
  ctrl.addColor(ctrlObj, 'color').onChange(function (e: number) {
    meshMaterial.color = new THREE.Color(e)
  })

  ctrl.addColor(ctrlObj, 'emissive').onChange(function (e: number) {
    meshMaterial.emissive = new THREE.Color(e)
  })

  ctrl.add(ctrlObj, 'emissiveIntensity', 0, 10).onChange(function (e: number) {
    meshMaterial.emissiveIntensity = e
  })

  const textureLoader = new THREE.TextureLoader()
  textureLoader.load('https://dongli-three.oss-cn-shanghai.aliyuncs.com/brick_roughness.jpg', function (map) {
    meshMaterial.emissiveMap = map
    meshMaterial.needsUpdate = true
  })

  scene.add(sphere)

  render.setAnimationLoop(anmation)

  function anmation () {
    stats.update()
    render.render(scene, camera)
  }

  return { camera, scene, render }
}

export {
  createCourse25
}
